﻿<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<TaxiCaosWeb.Models.Pago>" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                            
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Pagina - Pago</title>

 <!--<link rel="stylesheet" type="text/css" href="../../Content/css/contenido.css" />-->
    <!--<link rel="stylesheet" type="text/css" href="../../Content/css/stdtheme.css"/>-->
    <link rel="stylesheet" type="text/css" href="../../Content/css/uniform.default.css"/>
    <link rel="stylesheet" type="text/css" href="../../Content/css/ui-lightness/jquery-ui-1.10.2.custom.min.css" />
    <!--<link rel="stylesheet" type="text/css" href="../../Content/css/jquery.ui.timepicker.css?v=0.3.2" />-->
    <link rel="stylesheet" type="text/css" href="../../Content/css/cmxform.css" />
    <link rel="stylesheet" type="text/css" href="../../Content/css/msgBoxLight/msgBoxLight.css" />
    
    <script language="javascript" type="text/javascript" src="../../Content/js/jquery-1.9.1.js"></script>
    <script language="javascript" type="text/javascript" src="../../Content/js/jquery-migrate-1.1.1.js"></script>
    <script language="javascript" type="text/javascript" src="../../Content/js/jquery-ui-1.10.2.custom.min.js"></script>
    <script language="javascript" type="text/javascript" src="../../Content/js/AC_RunActiveContent.js"></script>
    <script language="javascript" type="text/javascript" src="../../Content/js/js.js"></script>
    <script language="javascript" type="text/javascript" src="../../Content/js/jScrollPane.js"></script>
    <script language="javascript" type="text/javascript" src="../../Content/js/modal-login.js"></script>
    <script language="javascript" type="text/javascript" src="../../Content/js/jquery.ui.timepicker.js?v=0.3.2"></script>
    <script language="javascript" type="text/javascript" src="../../Content/js/jquery.ui.datepicker-es.js"></script>
    <script language="javascript" type="text/javascript" src="../../Content/js/jquery.ui.timepicker-es.js"></script>
    <script language="javascript" type="text/javascript" src="../../Content/js/jquery.validate.js"></script>
    <script language="javascript" type="text/javascript" src="../../Content/js/jquery.msgBox.js"></script>

</head>

<script type="text/javascript">


    $(document).ready(function () {

        // validar formulario
        $("#pagoForm").validate({
            submitHandler: function (form) {
                submitForm(form);
            },
            rules: {
                NumeroTarjeta: "required",
                SecurityCode: "required"
                         
            }
        });

    });

    //function submitForm(btnClicked) {
    function submitForm(form) {
        var $form = $(form);
        //var $form = $(btnClicked).parents('form');

        $.ajax({
            type: "POST",
            url: $form.attr('action'),
            data: $form.serialize(),
            //    timeout: 30000,
            error: function (xhr, status, error) {
                $("#loading-div-background").hide();
                $.msgBox({
                    content: error,
                    type: "error"
                });
            },
            success: function (data) {
                $("#loading-div-background").hide();
                if (data.TipoMensaje == 'WARN') {
                    $.msgBox({
                        content: data.Message,
                        type: "alert"
                    });
                } else if (data.TipoMensaje == 'INFO') {
                    $.msgBox({
                        content: data.Message,
                        type: "info",
                        afterClose: function () {
                            window.opener.document.location.href = "/Reserva/IniciarReserva";
                            window.close();
                        }
                    });
                }
            },
            beforeSend: function (data) {
                $("#loading-div-background").show();
            }
        });

        return false; 
    }

    </script>

<% using (Html.BeginForm("Pago", "Pago", FormMethod.Post, new { @id = "pagoForm", @class = "cmxform" }))
               {%>
<body bgcolor="#ffffff" link="#000099" vlink="#0606ff" alink="#ff8306" >
   
<table width="200"  border="0" cellspacing="0" cellpadding="0" align="center">
    <tr>
      <td height="30">&nbsp;</td>
    </tr>
    <tr>
        <td>
          <table width="97%" border="1" cellspacing="0" cellpadding="0" align="center" >
            <tr>
              <td width="100%" height="203" colspan="2">
                <table width="100%" border="0" cellspacing="3" cellpadding="0" align="center">
                  <tr>
                    <td width="100%" bgcolor="#5663d3" height="28" colspan="7">
                      <table width="97%" border="0" cellspacing="0" cellpadding="0" align="center">
                        <tr>
                          <td><font face="Arial, Helvetica, sans-serif" size="3"><b><font color="#ffffff">
                          VISA Total Account:</font></b></font></td>
                          <td>&nbsp;</td>
                          <td>
                          
                            <!--<div align="right"><font face="Arial, Helvetica, sans-serif" size="3" color="#ffffff"><b>S/. <%=  Html.TextBoxFor(model => model.Importe)%></b></font></div>-->
                            <div align="right" ><font face="Arial, Helvetica, sans-serif" size="3" color="#ffffff"><b>S/. <%=  Html.TextBoxFor(model => model.Importe, new { @disabled = "" })%></b></font></div>
                            <input type ="hidden" /><%=  Html.HiddenFor(model => model.Importe)%>
                             <input type ="hidden" /><%=  Html.HiddenFor(model => model.IdReserva)%>
                             <input type ="hidden" /><%=  Html.HiddenFor(model => model.TicketReserva)%>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
	               <tr valign="top">
                    <td width="100%" colspan="7" height="90">
                     <table width="100%" border="0" cellspacing="3" cellpadding="0" align="center" >
                  	  <tr valign="top">
                   		<td width="100%" colspan="7" height="90">
	                         <table align="center" border="0" cellpadding="0" cellspacing="0" width="96%">
	                          <tr>
	                            <td height="30" width="90%">
	                            <font face="Arial, Helvetica,sans-serif" size="3" color="#800000">
	                            <b>Credit Card Information:</b></font></td>
	                          </tr>
                         	  <tr>
                         	    <td width="90%" height="67" align="middle" valign="center">
								  <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
									<tr>
									   <td width="30%" height="34" colspan="3" valign="top">
									 	<div>
											<font face="Arial, Helvetica, sans-serif" size="2"><B>>>> Pasarela de Pagos</B></font>
										</div>
								  	   </td>
                                	</tr>
                              	  </table>
                            	</td>
                          	  </tr>
                        	</table>
						</td>
					  </tr>
					 </table>
                    </td>
                  </tr>
                </table>
                <table width="100%" border="0" cellspacing="3" cellpadding="0" align="center">
                  <tr bgcolor="#dbe7ba">
                    <td height="58">
                      <table width="600" border="0" cellspacing="0" cellpadding="0" align="center">
                        <tr>
                          <td height="28" width="170">
                            <div align="right"><font size="2" face="Arial, Helvetica, sans-serif" color="#000099"><b>
                            Connection Server :<font color="#dbe7ba">..</font></b></font></div>
                          </td>
                          <td height="28" width="160">
                            <div align="center"><strong>PAYMENT SERVER</strong></div>
                          </td>
                          <td height="28" width="140">&nbsp;</td>
                          <td height="28" width="60" valign="bottom">
                            <div align="center"><font face="Arial, Helvetica, sans-serif" size="1">month</font></div>
                          </td>
                          <td height="28" width="69" valign="bottom">
                            <div align="center"><font face="Arial, Helvetica, sans-serif" size="1">year</font></div>
                          </td>
                        </tr>
                        <tr>
                          <td height="24" width="170">
                            <div align="right" id="NumeroTarjeta"><font size="2" face="Arial, Helvetica, sans-serif"><b><font color="#000099">Card
                              Number :<font color="#dbe7ba">..</font></font></b></font></div>
                          </td>
                          <!--<td height="24" width="160">
                            <div align="center">
                              <input name="tPAN" size="16" maxlength="19" ><%: Html.TextBoxFor(model => model.NumeroTarjeta)%> </input>
                            </div>
                          </td>-->
                          <td><%: Html.TextBoxFor(model => model.NumeroTarjeta)%> </td>
                         <td height="24" width="140">
                            <div align="right"><font size="2" face="Arial, Helvetica, sans-serif"><b><font color="#000099">Expiration&nbsp;
                              date :&nbsp;</font></b></font></div>
                          </td>
                          <td height="24" width="60">
                            <div align="center">
                              <select name="MONTH" size="1">
                               <!-- <option value="0" selected>Mes</option>-->
                                <option value="01" selected>01</option>
                                <option value="02">02</option>
                                <option value="03">03</option>
                                <option value="04">04</option>
                                <option value="05">05</option>
                                <option value="06">06</option>
                                <option value="07">07</option>
                                <option value="08">08</option>
                                <option value="09">09</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                                <option value="12">12</option>
                              </select>
                            </div>
                          </td>
                          <td height="34" width="69">
                            <div align="center">
                              <select name="YEAR" size="1">
                              	<!--<option value="0" selected>A&ntilde;o</option>-->
                                <option value="2013" selected >2013</option>
                                <option value="2014">2014</option>
                                <option value="2015">2015</option>
                                <option value="2016">2016</option>
                                <option value="2017">2016</option>
                              </select>
                            </div>
                          </td>
                        </tr>
                        <tr>
                            <td height="24" width="170">
                                <div align="right" id="CodigoSeguridad"><font size="2" face="Arial, Helvetica, sans-serif"><b><font color="#000099">Security
                                  Code :<font color="#dbe7ba">..</font></font></b></font>
                                </div>
                            </td>
                              <!--<td height="24" width="160">
                                <div align="center">
                                  <input name="tCode" size="16" maxlength="3" ></input>
                                </div>-->
                                <td ><%: Html.TextBoxFor(model => model.SecurityCode)%> </td>
                        </tr>
                      </table>   
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
            <tr>
              <td height="21" colspan="2">
                <table width="100%" border="0" cellspacing="3" cellpadding="0" align="center" bgcolor="#f6f6f6">
                  <tr>
                    <td width="82%" height="11">
                      <div align="right"><input type="reset" name="Reset" value=" Limpiar " width="100" height="23"/></div>
                    </td>
            		<td width="18%" height="11">
            		  <div align="right">
                      <!--<input type="button" name="Sumit" value="&nbsp;&nbsp;&nbsp;&nbsp; Enviar &nbsp;&nbsp;&nbsp;&nbsp;" width="100" height="23" onClick="Javascript:pagoTarjeta();">-->
                       <!--<input id="btnSubmit" type="submit" value="Realizar Pago"  onclick="submitForm(this);"/>-->
                       <input id="btnSubmit" type="submit" value="Realizar Pago"/>
                      </div>
            		</td>
                    <td width="3%" height="11">&nbsp;</td>
                  </tr>
                </table>
              </td>
            </tr>
            
          </table>
        </td>
    </tr>
    </table>
</body>
 <% } %>
 
</html>
